<template>
  <div @click.event.stop="selectElement" class="element" :class="{ isActive: isActive }">
    <span>{{ config.fieldLabel || '字段名' }}</span>
    <div class="h-2"></div>
    <div>
      <el-input
        :value="config.fieldName"
        style="width: 100%"
        readonly
        :placeholder="config.placeholder"
      ></el-input>
    </div>
  </div>
</template>

<script setup lang="ts" name="OproFieldSource">
import { defineProps, ref, inject, computed } from 'vue'

const props = defineProps<{ config: any; id: string }>()
const emits = defineEmits(['subChange', 'select'])
const injectWidgetId = ref(inject<String>('activeWidgetId'))
const isActive = computed(() => props.id === injectWidgetId.value)
const selectElement = () => {
  emits('select', props.id)
}
</script>

<style scoped lang="scss">
.element {
  padding: 5px;
  border: 1px dashed #ccc;
}
.element.isActive {
  border: 2px solid #409eff;
}
</style>
